<template>
    <view class="container">
        <view class="back-move-top" v-if="data.show"></view>
        <u-popup v-model="data.show" mode="center" border-radius="10" :mask-close-able="false">
            <u-image src="@/static/images/newVersion.png" width="647" height="392"></u-image>
            <view class="content">
                <u-parse :html="data.last.content" v-if="data.last && data.last.content"></u-parse>
            </view>
            <view class="btn-area">
                <u-button type="p" @click="update">更新</u-button>
                <u-button type="d" v-if="data.needUpdate === 0" @click="enter">跳过</u-button>
            </view>
        </u-popup>
        <u-popup v-model="data.showProcess" mode="center" border-radius="10" :mask-close-able="false">
            <view class="wraper">
                <u-image src="@/static/images/update.png" width="577" height="456"></u-image>
                <u-line-progress :percent="data.percent" active-color="#FC4F75" striped striped-active class="process"></u-line-progress>
                <view class="tips">版本努力更新中, 请稍后...</view>
            </view>
        </u-popup>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { useUserStore } from '@/store'

const userStore = useUserStore()

interface daraProps {
    show: boolean
    last: any
    url: string
    downloadTask: any
    percent: number
    showProcess: boolean
    type: number | undefined
    needUpdate: number
}

const data: daraProps = reactive({
    show: false,
    last: undefined,
    url: '',
    downloadTask: undefined,
    percent: 0,
    showProcess: false,
    type: -1,
    needUpdate: -1
})

onMounted(() => {
    // #ifdef H5
    enter()
    // #endif

    // #ifdef APP-PLUS
    uni.$u.$api.AppUpdate.getAppVersion({
        appUserType: 2,
        appType: uni.$u.os() === 'android' ? 1 : 2,
        appModel: 4
    }).then((res: any) => {
        if (!res) {
            enter()
            return
        }
        data.last = res
        let local: string | undefined = undefined
        data.needUpdate = res.needUpdate
        plus.runtime.getProperty(plus.runtime.appid || '', wgtInfo => {
            local = wgtInfo.version || plus.runtime.version
            if (uni.$u.$tools.Version(res.version, local)) {
                data.show = true
                console.log('有可升级版本', data.show)

                // 判断可升级的类型
                // 1.如果是整包  没有wgtUrl 参数  即视为是整包升级
                if (!res.wgtUrl) {
                    if (uni.$u.os() === 'ios') {
                        console.log('当前为ios平台，并且为整包升级！')
                        data.type = 2
                    }
                    if (uni.$u.os() === 'android' && res.androidUrl) {
                        console.log('当前为android平台，并且为整包升级！')
                        data.url = res.androidUrl
                        data.type = 0
                    }
                } else {
                    console.log('当前最新版本为资源包更新！')
                    data.url = res.wgtUrl
                    data.type = 1
                    if (data.needUpdate) {
                        updateWithPatch()
                    }
                }
            } else {
                enter()
            }
        })
    })
    // #endif
})

const update = () => {
    console.log('点击了更新按钮', data.type)
    if (data.type === 0) {
        uni.$u.$MRouter.appUpdate.to(
            {
                downloadUrl: data.url,
                needUpdate: data.needUpdate,
                content: data.last.content
            },
            'redirectTo'
        )
    } else if (data.type === 1) {
        updateWithPatch()
    } else if (data.type === 2) {
        let appUrl: string = 'itms-apps://itunes.apple.com/cn/app/id1561331710?mt=8'
        plus.runtime.openURL(appUrl)
    } else {
        console.log('参数有误')
        enter()
    }
}
const updateWithPatch = () => {
    data.show = false
    data.showProcess = true
    data.downloadTask = uni.downloadFile({
        url: data.url,
        success: downloadResult => {
            if (downloadResult.statusCode === 200) {
                plus.runtime.install(
                    downloadResult.tempFilePath,
                    {
                        force: false
                    },
                    function () {
                        console.log('install success...')
                        plus.runtime.restart()
                    },
                    function (e) {
                        uni.$u.toast(e.message, 3000)
                        console.error('install fail...', e)
                    }
                )
            }
        }
    })
    data.downloadTask.onProgressUpdate((res: any) => {
        data.percent = res.progress
    })
}

const enter = () => {
    console.log('没有版本升级,直接进入登录页面', userStore.userInfo)
    // 已经登录
    if (userStore.userInfo) {
        uni.$u.$MRouter.home.to()
    } else {
        // 未登录
        uni.$u.$MRouter.login.to(null, 'redirectTo')
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100vh;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #2c2c2c;
    :deep(.u-mode-center-box) {
        background-color: transparent;
    }
    .content {
        min-height: 200rpx;
        max-height: 400rpx;
        background-color: white;
        padding: 0 30rpx;
        max-width: 647rpx;
        padding-bottom: 20rpx;
    }
    .btn-area {
        background-color: white;
        display: flex;
        justify-content: space-around;
        padding-bottom: 20rpx;
        & > button {
            width: 30%;
        }
    }
    .wraper {
        position: relative;
        .process {
            position: absolute;
            width: 90%;
            left: 5%;
            bottom: 100rpx;
        }
        .tips {
            position: absolute;
            bottom: 20rpx;
            left: 0;
            text-align: center;
            width: 100%;
            color: #999999;
        }
    }
}
</style>
